//抓取相关事件源对象
//开始价格
var oStart = document.querySelector('.start');
//结束价格
var oEnd = document.querySelector('.end');
var priceBtn = document.querySelector('.priceBtn');
//商品名称
var gname = document.querySelector('.gname');
var gnameBtn = document.querySelector('.gnameBtn');
//存放商品数据的节点
var contentDiv = document.getElementById('content');
// console.log(oEnd);
// console.log(contentDiv);

/**
 * ajax 数据是动态获取的，如果有节点也是动态拼接的，
 * 事件相关必须在ajax的回调函数success中编写
 */
//页面加载
window.onload = function(){
    console.log('over...');
    //页面加载的时候请求后端数据
    $.ajax({
        url:'https://cache.iminutes.cn/api/soft/goods.html',
        type:"GET",
        data:{

        },
        dataType:'json',
        success:function(res){
            //console.log(res);
            if(res.status==200){
                //需要组合成html结构
                getListData(res.data);
            }else{
                alert('请求失败!');
            }
        }
    });
    
}

/**
 * 
 * @param {拼接节点的数据} data 
 */
function getListData(data){
    console.log(data);
    setDataHtml(data);
    //点击价格搜索
    var priceGoodList = [];
    priceBtn.addEventListener('click',function(e){
        //console.log('test...');
        //获取开始价格oStart.value和结束价格oEnd.value
        //过滤方法filter
        priceGoodList = data.filter(function(val,index,arr){
            return val.price>= oStart.value&&val.price<=oEnd.value;
        });
        //既然已经筛选了结果，就再次调用组合html的方法
        setDataHtml(priceGoodList);
        //console.log(priceGoodList);
    });
    //按照商品名称搜索
    gnameBtn.addEventListener('click',function(e){
        //新的数组
        var gnameListGoods = [];
        //哪个方法 some 返回一个布尔值
        data.some(function(val,index,arr){
            if(val.gname == gname.value){
                gnameListGoods.push(val);
                return true;
            }else{
                return false;
            }
        });
        //既然已经筛选了结果，就再次调用组合html的方法
        setDataHtml(gnameListGoods);
        console.log(gnameListGoods);
    });
}

/**
 * 
 * @param {传递的JSON数据} data
 */
function setDataHtml(data){
    //拼接处理
    var str = '';
    data.forEach(function(val,index,arr){
        //console.log(val);
        str+='<tr>';
        str+='<td>'+val.gid+'</td>';
        str+='<td>'+val.gname+'</td>';
        str+='<td>'+val.price+'</td>';
        str+='</tr>';
    });
    //alert(str);
    contentDiv.innerHTML = str;


}